<template>
  <div>
    <el-row type="flex" justify="end" style="margin: 15px 15px 0 0">
      <el-col :span="12" style="text-align: right">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :total="total"
          :current-page="current.page"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="current.pagesize"
          layout="prev,pager,next,sizes,jumper"
        >
        </el-pagination>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'FootPage',
  props: ['current', 'total'],
  data () {
    return {}
  },
  methods: {
    handleSizeChange (newPageSize) {
      this.current.pagesize = newPageSize
      this.$emit('getList')
    },
    handleCurrentChange (newPage) {
      this.current.page = newPage
      this.$emit('getList')
    }
  }
}
</script>

<style scoped lang="less">
/deep/ .el-pagination__jump {
  margin-left: 0;
}
</style>
